<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=yes" name="format-detection" />
<title>指纹蜜码</title>
<style type="text/css">
body { font-size: 16px;font-family: "微软雅黑", 'Microsoft Yahei', 'Simsun';color: #000;text-align: justify;line-height: 1.5em;-webkit-text-size-adjust: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-touch-callout: none;overflow-x: hidden;}
ul,li { list-style: none;}

textarea { resize: vertical;}
table { border-collapse: collapse;border-spacing: 0;font-size: 14px;border: 0;}
input { vertical-align: middle;}
input[type=button],input { cursor: pointer;font-family: '微软雅黑', 'Microsoft Yahei', 'Simsun';}
* { margin: 0;padding: 0;}
a:link,a:visited { text-decoration: none;color: #333;}
img { border: none;vertical-align: middle;}

.fix:after {display: block;height: 0;clear: both;overflow: hidden;visibility: hidden;content: '';}

.fl { float: left;}
.fr { float: right;}
.clear { clear: both;}
.clearfix { height: 0px;overflow: hidden;clear: both;line-height: 0;font-size: 0;width: 100%;}
.hide { display: none;}

.logo { position: absolute;z-index: 10;width: 61px;top: 30px;left: 25px;}
.fingers { margin: 0px auto 0px; width: 320px; padding-top: 120px;position: relative;}
.fingerArea { margin: auto;width: 240px;margin-top: 20px;position: relative;}
.fingerArea li { width: 50%;float: left;text-align: center;}
.fingerLine { display: none; margin-top: -10px; position: absolute; -webkit-transform: translateY(0px);left: 50%; margin-left: -156px; top: 0px;width: 313px;height: 15px;background: url({MODULE_URL}template/mobile/images/line.png) no-repeat center center;background-size: 313px 15px;}
.finger { cursor: pointer;border-radius: 50%;overflow: hidden;width: 83px;height: 129px;margin: auto;background: url({MODULE_URL}template/mobile/images/finger1.png) no-repeat;background-size: 100% 100%;}
.finger.cur{ background:url({MODULE_URL}template/mobile/images/finger2.png) no-repeat; background-size:100% 100%;}
.eachmodule { display: none;color: #fff;}
.man .bgall1, .woman .bgall1{ width:74px; height:54px; font-size:0px;}
.man,.woman{ margin-top:10px; text-align:center;}
.man .bgall1{ background-position:-10px -53px;}
.woman .bgall1{ margin-left:15px; background-position:-88px -53px;}

.scaning{ padding-top:104px;}
.scaning .word{ text-align:center; margin-bottom:40px;}
.scaningMove{ width:1400px; height:104px; background:url({MODULE_URL}template/mobile/images/analying.png) repeat-x; background-size:auto 104px;}
.scaningMove.cur{ -webkit-animation: myfirst 10s linear 0s 1 alternate;}
@-webkit-keyframes myfirst {
	from {margin-left:0;}
	to {margin-left:-1200px;}
}
.bgall1,.bgall2{ display:inline-block; background-repeat:no-repeat;}
.bgall1 { background-image:url({MODULE_URL}template/mobile/images/love.png); background-size:176px 205px;}
.themeTit { z-index: 20; position: absolute; right: 39px; top: 31px; width: 125px; height: 48px; background-position: -1px 0;}
.fingerTip1 { display: block; margin: auto; width: 233px;height: 68px; background-image: url({MODULE_URL}template/mobile/images/top.png);background-size: 233px 58px;}
.fingerTip2 { display: block; margin: 20px auto; width: 297px; height: 68px; background-image: url({MODULE_URL}template/mobile/images/bottom.png);background-size: 297px 38px;}

.resultArea{ position:relative; padding:55px 15px 10px;}
.resultArea .back{ font-size:0px; display:block; position:absolute; right:0px; top:3px; z-index:100; background:url({MODULE_URL}template/mobile/images/back.png) no-repeat center center; width:51px; height:42px; background-size:100% auto;}
.resultArea .bd{ padding:10px 12px 0; background-color:rgba(209,196,84,0.42);}
.resultArea .tit{ text-align:center; font-size:18px;}
.resultArea .line1{ margin-top:5px;}
.resultArea .line1,.resultArea .line2{ color:#6ec6fe; padding-left:9px;}
.progressBarWrap,.progressBar{ border-radius:20px; height:16px;}
.progressBarWrap{ background-color:#edf2f6; margin:5px 9px 15px;}
.progressBar{ background-color:#26a4ec; width:0%;}
.resultArea .line2{ padding-bottom:4px; border-top:1px dashed #dadada; padding-top:10px;}
.matchContent{ line-height:1.4em; text-align:justify; margin:0px 10px 0; font-size:14px;}
.matchBotWrap{ position:relative; height:83px;}
.matchBotWrap .bd1{ margin-left:60px; height:100%; background-color:rgba(209,196,84,0.42);}
.matchBotWrap:after{ content:''; position:absolute; left:0px; top:0px; z-index:10; width:60px; height:84px; background:url({MODULE_URL}template/mobile/images/corner.png) no-repeat; background-size:60px 100%;}
.matchType,.matchContent{ opacity:0;}

.resultBtn{ display:block; margin:auto; font-size:0px; width:154px; height:37px;}
.resultTips{ margin:5px 8px;}
.resultTips li{ float:left; text-align:center; display:inline-block; width:50%;}
.resultTips a{ display:inline-block; margin:0px;/* -webkit-transform:scale(1.2);*/}
.resultTips .share{ background-position:-12px -111px;}
.resultTips .sale{ background-position:-12px -150px;}
.resultTips .tip{ font-size:12px; margin-top:2px; padding-bottom:10px; line-height:1.2em;}

#mask { position: fixed; top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);display: none;z-index: 20000;}
#mask img{ position: fixed;right: 18px;top: 5px;width: 260px!important;height: 180px!important;z-index: 20001;}

#phone { position: fixed; top: 12%;left: 8px; right:8px;height: 250px; background: rgba(0, 0, 0, 0.9);display: none;z-index: 20000;}
#qrcode { position: fixed; top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);display: none;z-index: 20000;}

#indexbody { position: relative;overflow-x: hidden;}
#indexbody:after { content: '';position: fixed;z-index: -1;left: 0px;top: 0px;width: 100%;height: 100%; background: url({MODULE_URL}template/mobile/images/body.jpg) no-repeat center top;background-size: 100% auto;}
#main { overflow-y: scroll;position: relative;}

.btn {display: inline-block;;margin-bottom: 0;font-size: 14px;font-weight: normal;text-align: center;white-space: nowrap;vertical-align: middle;cursor: pointer;background-image: none;border: 1px solid transparent;border-radius: 4px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;}
.btn-primary {color: #ffffff;background-color: #428bca;border-color: #357ebd;}
.btn-lg {padding: 10px 16px;font-size: 14px;line-height: 0.85;border-radius: 6px;}
.btn.disabled, .btn[disabled] {cursor: default;opacity: 0.65;filter: alpha(opacity=65);-webkit-box-shadow: none;-moz-box-shadow: none;border-color: #8b9aa3;}
.btn.disabled, .btn.disabled:hover, .btn.disabled:active, .btn.disabled.active, .btn.disabled:focus, .btn[disabled], .btn[disabled]:hover, .btn[disabled]:active, .btn[disabled].active, .btn[disabled]:focus {background-color: #8b9aa3 !important;background-repeat: repeat-x;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;text-shadow: none; }


</style>
<script type="text/javascript" src="{MODULE_URL}template/mobile/js/jquery-1.7.2.min.js"></script>
</head>
<body id="indexbody">

	<div style="width: 0px; height: 0px; opacity: 0;">
		<audio src="{MODULE_URL}template/mobile/musics/1.mp3" id="media1" style="width: 0px; height: 0px;" loop></audio>
	</div>
	
	<div style="width: 0px; height: 0px; opacity: 1;">
		<audio src="{MODULE_URL}template/mobile/musics/2.mp3" id="media2" style="width: 0px; height: 0px;" loop></audio>
	</div>
	
	
	<div class="bodyconent">
	
		<div class="eachmodule" id="main" style="display: block;">
			<div class="bgall1 themeTit"></div>
			<div class="fingers">
				<div class="fingerTip1 bgall2"></div>
				<div class="fingerArea">
					<div class="fingerLine" id="fingerLine"></div>
					<ul>
						<li>
							<div class="finger" id="manFinger"></div>
							<div class="man">
								<div class="bgall1">男生</div>
							</div>
						</li>
						<li>
							<div class="finger" id="womanFinger"></div>
							<div class="woman">
								<div class="bgall1">女生</div>
							</div>
						</li>
					</ul>
					<div class="clearfix"></div>
				</div>
				<div class="fingerTip2 bgall2"></div>
				<div style="height: 5px;"></div>
			</div>
		</div>
		
		<div class="eachmodule" id="analying">
			<div class="scaning">
				<div class="word">正在分析...</div>
				<div style="position: relative; overflow: hidden; height: 104px;">
					<div class="scaningMove" style="position: absolute; left: 0px; top: 0px;"></div>
				</div>
			</div>
		</div>
		
		<div class="eachmodule" id="result">
			<div class="resultArea">
				<a href="#" class="back" id="refresh" style="display: block;">返回</a>
				<div class="bd">
					<div class="tit">配对结果</div>
					<div class="matchRadioWrap">
						<p class="line1">
							匹配率：<span class="matchRadio" id="matchRadio"></span>
						</p>
						<div class="progressBarWrap">
							<div class="progressBar" id="progressBar"></div>
						</div>
					</div>
					<div class="line2">
						配对类型：<span id="matchType" class="matchType"></span>
					</div>
					<div class="matchContent" id="matchContent" style="opacity: 1;">TA于你而言就像一块硕大的磁石，你就已经深深的被TA俘虏。TA的一颦一笑、举手投足在你眼中恍若天神，TA说的每一个字、每一句话，你都奉若圣经。但缘分这种东西也讲究男女搭配，干活不累，如果只是“落花有意流水无情”，赶紧解毒吧</div>
				</div>
				<div class="matchBotWrap">
					<div class="bd1"></div>
				</div>
			</div>
			<div class="resultTips">
				<ul>
					<li><a class="resultBtn bgall1 share" onclick="document.getElementById('mask').style.display='block';" id="share">分享一下</a></li>
					<li><a class="resultBtn bgall1 sale"  href="{$settings['subscribe_url']}">二维码</a></li>
				</ul>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<div style="width: 0px; height: 0px; opacity: 0;">
		<input type="hidden" value="startMedia2" id="mymusic3" onClick="media2Play()"> 
		<input type="hidden" value="stopMedia2"  id="mymusic4" onClick="media2Stop()">
	</div>
	
	<div id="mask" onclick="document.getElementById('mask').style.display='';" style="">
		<img src="{MODULE_URL}template/mobile/images/guide.png">
	</div>
	
	<div id="qrcode" onclick="document.getElementById('qrcode').style.display='';" align="center" style="padding-top: 25px;">
		<img src="http://open.weixin.qq.com/qr/code/?username=gh_cf1cf9d33438" style="height: 60%; width: 90%;" class="img-responsive">
	</div>
	
	<div id="phone"  style="padding-top: 30px;">
		<p style="color: white;font-size: 12px;padding-left: 15px;padding-right: 5px;">
			
		</p>
		<div style="padding-top: 20px;padding-left: 15px;font-size: 12px">
			<span style="color: white;">手机号码：</span>
			<input type="text" name="actor_phone" placeholder="请输入您的手机号码" id="actor_phone" style="height:38px;">
		</div>
		<div style="padding-top: 20px;" align="center">
			<button id="commit" class="btn btn-lg btn-primary" style="margin-right: 15px;">提交</button>
			<button onclick="document.getElementById('phone').style.display='';" class="btn btn-lg btn-primary btn-block">关闭</button>
		</div>
	</div>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript">
	shareData = {
            title: '指纹蜜码',
            desc: '伸出你和Ta的手指一起测测吧！',
            link: window.location.href,
            imgUrl: '{MODULE_URL}icon.jpg'
        };
	jssdkconfig = {php echo json_encode($_W['account']['jssdkconfig']);} || {};
    // 是否启用调试
    jssdkconfig.debug = false;
    
    jssdkconfig.jsApiList = [
        'onMenuShareTimeline',
        'onMenuShareAppMessage'
    ];
    wx.config(jssdkconfig);
	wx.ready(function () {
        wx.onMenuShareAppMessage({
              title: shareData.title,
              desc: shareData.desc,
              link: shareData.link,
              imgUrl:shareData.imgUrl,
              success: function () {}
        });
        wx.onMenuShareTimeline({
             title: shareData.desc,
             desc: shareData.desc,
             link: shareData.link,
             imgUrl:shareData.imgUrl,
             success: function () {}
        });
    });
	
		$(function(){

			$("#commit").click(function () {
				var $btn = $("#commit");
				if($btn.hasClass("disabled")) return;
				
				var phoneReg = /^[0-9]{2,4}-?[0-9]{4,16}$/;
				
				var phone = $("#actor_phone").val();
				if(phone.length == 0) {
					alert('手机号码不能为空');
					$("#actor_phone").focus();
					return;
				} else if(!phoneReg.test(phone)){
				 	alert('手机号码必须为6到12位数字');
				  	$("#actor_phone").focus();
				  	return;
				}
				var submitData = {
					w_id: '389',
					u_id: '120',
					s_id: '116',
					phone:phone,
					action: "commit"
				};
				$btn.addClass("disabled");
				$.post('/mobile/sweet/process', submitData,function(data) {
					$btn.removeClass("disabled");
					$("#actor_phone").val('');
					document.getElementById('phone').style.display=''
					if(data && data.ret == 0){
						alert("提交信息成功！");
						return;
					} else {
						alert("提交信息失败！");
						return;
					}
				},"json");
			});
		});
		
		function getRandomNum(min, max) {
			var range = max - min;
			var rand  = Math.random();
			return (min + Math.round(rand * range));
		}
		
		$(function() {
			var disy = 0;
			var slideSpeed = 20;
			var slideTimer1;
			var slideTimer2;
			var uptrue = false;
			var upDis  = 0;
			var maxDis = 134;
			var media1 = document.getElementById("media1");
			var j = 0;
			var manFinger   = $("#manFinger");
			var manStart    = false;
			var womanFinger = $("#womanFinger");
			var womanStart  = false;
			
			function slideDownDis() {
				$(".fingerLine").show();
				if (manStart == true && womanStart == true && uptrue == false) {
					if (j == 0) {
						media1.play();
					}
					j++;

					if (disy >= 0 && disy <= maxDis) {
						++disy;
						$("#fingerLine").css("-webkit-transform","translateY(" + disy + "px)");
					} else {
						slideTimer2 = setInterval(slideUpDis, slideSpeed);
						clearInterval(slideTimer1);
						uptrue = true;
					}
				}
			}

			function slideUpDis() {
				if (manStart == true && womanStart == true) {
					if (disy <= 0) {
						manStart = false;
						womanStart = false;
						clearInterval(slideTimer2);
						upDis = 0;
						
						scaningMove();
						$(".fingerLine").hide();
						uptrue = false;
					} else {
						--disy;
						upDis++;
						$("#fingerLine").css("-webkit-transform", "translateY(" + disy + "px)");
					}
				}
			}

			function startMove() {
				slideTimer1 = setInterval(slideDownDis, slideSpeed);
				if (uptrue && disy > 0) {
					clearInterval(slideTimer1);
					slideTimer2 = setInterval(slideUpDis, slideSpeed);
				}
			}

			function stopMove() {
				clearInterval(slideTimer1);
				clearInterval(slideTimer2);
			}
			
			function showResult() {
				$.getJSON("{php echo $_W['siteroot'].'app/'.$this->createMobileUrl('result',array(),1);}",function(json){
					var resultLen = json.furtuneResult.length;
				   	var i = getRandomNum(0, resultLen-1);
					$("#matchType").text(json.furtuneResult[i].matchType);
					$("#matchContent").text(json.furtuneResult[i].matchContent);
					shareData.title="指纹蜜码:我和Ta的匹配率"+json.furtuneResult[i].matchRadio+" 配对类型:"+json.furtuneResult[i].matchType;
					wx.ready(function () {
				        wx.onMenuShareAppMessage({
				              title: shareData.title,
				              desc: shareData.desc,
				              link: shareData.link,
				              imgUrl:shareData.imgUrl,
				              success: function () {}
				        });
				        wx.onMenuShareTimeline({
				             title: shareData.title,
				             desc: shareData.desc,
				             link: shareData.link,
				             imgUrl:shareData.imgUrl,
				             success: function () {}
				        });
				    });
					title = json.furtuneResult[i].matchContent;
					
					var matchRadioInt = parseInt(json.furtuneResult[i].matchRadio);
					var progressSpeed = 1500;
					var radioSpeed = Math.ceil(progressSpeed/matchRadioInt);
					$("#progressBar").animate({width:matchRadioInt + "%"},progressSpeed,function(){
							$(".matchType").animate({"opacity":"1"},400,function(){
								$(".matchContent").animate({"opacity":"1"},500);
							});
						});
					var radioInitial = 0;
					var radioTimer = setInterval(function(){
						if(radioInitial < matchRadioInt) {
							++radioInitial;
							if(radioInitial < 10) {
								radioInitial = "0" + radioInitial;
							}
							$("#matchRadio").text(radioInitial + "%");
						}
					},radioSpeed);
					
						
				});
			}
			
			function resultShow() {
				showResult();
				$("#progressBar").css("width","0");
			}

			$(".bodyconent").each(function() {
				manFinger[0].ontouchstart = function() {
					$(this).addClass("cur");
					manStart = true;
					if (manStart == true && womanStart == true) {
						media1Play();
					}
						
					slideTimer1 = setInterval(slideDownDis, slideSpeed);
					this.ontouchmove = function() {
						event.preventDefault();
					}
					this.ontouchend = function() {
						$(this).removeClass("cur");
						clearInterval(slideTimer1);
						manStart = false;
						media1Stop();
						event.preventDefault();
					}
					event.preventDefault();
				}

				womanFinger[0].ontouchstart = function() {
					$(this).addClass("cur");
					womanStart = true;
					if (manStart == true && womanStart == true) {
						media1Play();
					}
					this.ontouchmove = function() {
						event.preventDefault();
					}
					this.ontouchend = function() {
						$(this).removeClass("cur");
						womanStart = false;
						media1Stop();
						event.preventDefault();
					}
					event.preventDefault();
				}// start
			});

			function scaningMove() {
				$("#mymusic3").click();
				$("#analying").show().siblings(".eachmodule").hide();
				$(".scaning").css("opacity", "1");
				$(".scaningMove").addClass("cur");
				setTimeout(function() {
					resultShowScanHide();
					$(".scaningMove").removeClass("cur");
				}, 4000);
			}

			function resultShowScanHide() {
				$("#mymusic4").click();
				$(".scaning").css("opacity", "0");
				$("#result").show().siblings(".eachmodule").hide();
				setTimeout(resultShow, 200);
			}

			function resultShowScanHide1() {
				$("#analying").show().siblings(".eachmodule").hide();
				scaningMove();
			}

			$("#refresh").click(function() {
				$(".fingerLine").hide();
				$(".matchType,.matchContent").animate({
					"opacity" : "0"
				}, 1000);
				$("#main").show().siblings(".eachmodule").hide();
			});
			musicHidePlay();
		});

		var media1 = document.getElementById("media1");
		var media2 = document.getElementById("media2");
		media1.volume = 0;
		media2.volume = 0;
		
		function musicHidePlay() {
			media1.volume = 0;
			media2.volume = 0;
		}
		
		function media1Play() {
			media2.pause();
			media1.play();
			media1.volume = 1;
		}
		
		function media1Stop() {
			media1.pause();
			media1.volume = 1;
		}

		function media2Play() {
			media1.pause();
			media2.play();
			media2.volume = 1;
		}
		
		function media2Stop() {
			media2.pause();
			media2.volume = 1;
		}
	</script>
</body>
</html>
